<template>
	<view>
		<view class="content">
			<view class="Paid">已缴纳保证金（元）</view>
			<view class="money">566.00</view>
			<view class="surplus">仍需缴纳：37382.00元</view>
			<view class="bj"></view>
		</view>
		<view class="record">
			缴纳记录
		</view>
		<view class="record_list">
			<text class="title_money">3894.93 </text>
			<text class="title_text"> 保证金</text>
			<text class="status">已缴纳</text>
			<text class="time">2020-12-14 12:34</text>
			<text class="hengxian"></text>
		</view>
		<view class="record_list">
			<text class="title_money">3894.93 </text>
			<text class="title_text"> 保证金</text>
			<text class="status">已缴纳</text>
			<text class="time">2020-12-14 12:34</text>
			<text class="hengxian"></text>
		</view>
		<button class="immediately">立即缴纳</button>
	</view>
</template>

<script>
</script>

<style>
	.content {
		width: 750rpx;
		height: 297rpx;
		background: linear-gradient(315deg, #FCCA22 0%, #FCDA22 100%);
		opacity: 1;
	}
	.bj{
		width: 153rpx;
		height: 192rpx;
		background: linear-gradient(307deg, #FCD427 0%, #FFE246 100%);
		box-shadow: 0px 5rpx 10rpx rgba(253, 198, 37, 0.55);
		opacity: 1;
		position: absolute;
		left: 467rpx;
		top: 70rpx;
		background-image: url('../../../static/me/gold.png');
		background-size: cover;
	}
	.Paid{
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #21201D;
		opacity: 0.85;
		margin-left: 25rpx;
		padding-top: 57rpx;
	}
	.money{
		font-size: 65rpx;
		font-family: PingFang SC;
		font-weight: 600;
		color: #21201D;
		margin-left: 25rpx;
		opacity: 1;
		margin-top: 10rpx;
	}
	.surplus{
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #21201D;
		margin-left: 25rpx;
		opacity: 0.65;
		margin-top: 36rpx;
	}
	.record{
		border-left: 7rpx solid  #FCDA22;
		border-radius: 3rpx;
		margin-top: 28rpx;
		margin-left: 25rpx;
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #21201D;
		opacity: 1;
		padding-left: 18rpx;
	}
	.record_list{
		width: 706rpx;
		height: 170rpx;
		margin: auto;
	}
	.title_money,.title_text{
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 100;
		color: #21201D;
		opacity: 1;
		margin-top: 36rpx;
		display: inline-block;
	}
	.title_money{
		font-size: 32rpx;
		font-weight: 400;
		margin-right: 10rpx;
	}
	.time{
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #21201D;
		opacity: 0.65;
		display: block;
		margin-top: 28rpx;
	}
	.status{
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #EB3E3E;
		opacity: 1;
		float: right;
		margin-top: 47rpx;
		margin-right: 6rpx;
	}
	.hengxian{
		width: 706rpx;
		height: 3rpx;
		background: #F5F5F5;
		display: block;
		margin-top: 32rpx;
	}
	.immediately{
		width: 699rpx;
		height:79rpx;
		background: #FCDA22;
		opacity: 1;
		border-radius: 39rpx;
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 79rpx;
		color: #21201D;
		text-align: center;
		left: 25rpx;
		position: fixed;
		bottom: 14rpx;
	}
</style>
